@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none; }

.box {
  width: 360px;
  height: 360px;
  margin: 50px auto;
  position: relative; }
  .box ul {
    width: 360px;
    height: 360px;
    position: relative; }
    .box ul .list {
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      border: 1px solid black;
      position: absolute; }
      .box ul .list img {
        width: 100%;
        height: 100%; }
      .box ul .list:nth-child(1) {
        left: 0;
        top: 0; }
      .box ul .list:nth-child(2) {
        left: 125px;
        top: 0; }
      .box ul .list:nth-child(3) {
        left: 250px;
        top: 0; }
      .box ul .list:nth-child(4) {
        left: 250px;
        top: 125px; }
      .box ul .list:nth-child(5) {
        left: 250px;
        top: 250px; }
      .box ul .list:nth-child(6) {
        left: 125px;
        top: 250px; }
      .box ul .list:nth-child(7) {
        left: 0;
        top: 250px; }
      .box ul .list:nth-child(8) {
        left: 0;
        top: 125px; }
  .box p {
    width: 100px;
    height: 100px;
    font-weight: bold;
    color: red;
    border: 1px solid green;
    line-height: 100px;
    text-align: center;
    cursor: pointer;
    position: absolute;
    left: 125px;
    top: 125px; }
  .box .page {
    line-height: 50px;
    color: #9a9a9a;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50px;
    width: 300px;
    height: 50px;
    margin-left: -150px;
    display: none;
    background: #000;
    color: #fff; }
  .box .record {
    width: 360px;
    height: 360px;
    text-align: center; }
    .box .record span {
      height: 40px;
      line-height: 40px;
      display: block;
      font-size: 24px;
      font-weight: bold;
      color: red;
      margin-top: 5px;
      background: rgba(0, 0, 0, 0.2); }
  .box .active {
    width: 100px;
    height: 100px; }
    .box .active::before {
      content: url(../img/mask.png);
      display: block;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.3);
      position: absolute; }
  .box .biaoji {
    background-color: rgba(0, 0, 0, 0); }
    .box .biaoji::after {
      width: 100px;
      height: 100px;
      content: "已抽中";
      display: block;
      color: red;
      font-family: cursive;
      font-size: 24px;
      background-color: rgba(0, 0, 0, 0.4);
      position: absolute;
      left: 0;
      top: 0; }
